var config = {
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大
    width: 2,
    count: 150,		//点个数
    color: "#c1c1c1", 	//点颜色
    stroke: "#d6d6d6", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数
}

//调用
CanvasParticle(config);


// 数据渲染
let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]

   let ul=document.querySelector('.banner-cont3')
//    定义变量保存
let dataHtml=''
data.forEach(function(v,i){
// console.log(v)
dataHtml+=`
<li class="" data-price="${v.price}">${v.count}</li>
`
})


let data1 = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]


let bannerCont3=document.querySelector('.banner-cont3')
let pric=document.querySelector('.price')
let eachPrice=document.querySelector('.each-price')
   let data1Html=''
data1.forEach(function(v,i){
// console.log(v)
data1Html+=`
<li class="fl ${i==0? 'active':''}" data-price="${v.price}" data-eachprice="${v.unitPrice}">${v.count}次</li>
`
})

// console.log(data1Html)

bannerCont3.innerHTML+=data1Html

bannerCont3.addEventListener('click',function(e){
let bool=e.target.nodeName=='LI'
// console.log(bool)
for(let i=1;i<bannerCont3.children.length;i++){
        
    bannerCont3.children[i].classList='fl'
if(bool&&!e.target.classList.contains('test')){
    // console.log(1)
    
    e.target.classList.add('active')
}
pric.textContent=e.target.dataset.price
eachPrice.textContent=e.target.dataset.eachprice
}
})


tab('.content h3','.contents .content-s')